import React from 'react';
import { Link } from 'react-router-dom';
import { TrophyIcon } from './icons/TrophyIcon.tsx';

interface DrawEndModalProps {
  isOpen: boolean;
  onClose: () => void;
  totalParticipants: number;
}

const DrawEndModal: React.FC<DrawEndModalProps> = ({ isOpen, onClose, totalParticipants }) => {
  if (!isOpen) {
    return null;
  }

  return (
    <div 
      className="fixed inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center z-50 animate-fade-in-fast" 
      onClick={onClose}
    >
      <div 
        className="bg-slate-800 rounded-xl shadow-2xl w-full max-w-md m-4 border border-slate-700 transform animate-scale-in"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="p-8 text-center">
          <div className="flex justify-center mb-4">
            <TrophyIcon className="w-16 h-16 text-yellow-400" />
          </div>
          <h2 className="text-2xl font-bold text-white mb-2">摇号已结束！</h2>
          <p className="text-slate-400 mb-6">
            所有 {totalParticipants} 个名额已经分配完毕，感谢大家的参与！
          </p>

          <div className="bg-green-500/10 p-4 rounded-lg mb-6">
            <p className="text-lg text-green-400 font-semibold">🎉 分组完成</p>
            <p className="text-slate-300 text-sm mt-1">
              请查看下方的分组情况，准备开始比赛吧！
            </p>
          </div>

          <div className="mt-8 space-y-3">
            <Link
              to="/groups"
              className="block w-full px-6 py-3 rounded-md text-white font-semibold bg-blue-600 hover:bg-blue-700 transition text-center"
              onClick={onClose}
            >
              查看分组情况
            </Link>
            <button
              type="button"
              onClick={onClose}
              className="w-full px-6 py-3 rounded-md text-slate-300 font-semibold bg-slate-700 hover:bg-slate-600 transition"
            >
              关闭
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default DrawEndModal;
